<h1>Asignar Moderador</h1>

<div class="alert alert-info">
	<table>
		<tr>
			<td>
				<img src=<%= @charla.conferencia.cargarImagen() %> class="img-thumbnail" style="border-radius: 5%; height:100px;">
			</td>
			<td>
				<div>
					<div>
						<h2><%= @charla.titulo%> <small><%= @charla.conferencia.nombre%></small></h2>
					</div>  
					<div>
						<p><%= @charla.abstract%></p>
					</div> 
				</div>
			</td>
		</tr>
	</table>
</div>

<% if @message != nil %>
	<p class="alert alert-danger text-danger"><%= @message %></p>
<% end %>
	
<form method="post" action="/asignarModeradorCharla/<%= @charla.id %>">
	<input id="textbox" type="text" placeholder="Buscar Usuario..." class="filter form-control" name="userNotSelected" style="width:25%"> 
	</br>
	<div class="col-md-3 box1" >
		<label for="bootstrap-duallistbox-nonselected-list_duallistbox_demo2">Seleccione un usuario</label>
		<select id="select" name="SelectRight" data-duallistbox_generated="true" class="form-control" size="10" multiple="multiple">
	    	<% @usuariosDisponibles.each do |usuario| %>
	        	<option value="<%= usuario.id %>" style="display:none;"><%= usuario.nombre%> <%= usuario.apellido%></option>
	        <% end %>
	    	<% if ! @charla.moderador.nil? %>
	    		<option value="<%= @charla.moderador.id %>" selected><%= @charla.moderador.nombre%> <%= @charla.moderador.apellido%></option>
	    	<% end %>
		</select>
    </div>       
	<br><br><br><br><br><br><br><br><br><br><br><br>
    <input type="submit" value="Guardar" class="btn btn-primary" onClick="selectAll(this.form.SelectRight)"/>
    <input type="submit" value="Volver" onClick="volver(this)" class="btn btn-default"/>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
	jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
        return this.each(function() {
            var select = this;
            var options = [];
            $(select).find('option').each(function() {
                options.push({value: $(this).val(), text: $(this).text()});
            });
            $(select).data('options', options);
            $(textbox).bind('change keyup', function() {
                var options = $(select).empty().data('options');
                var search = $.trim($(this).val());
                var regex = new RegExp(search,"gi");
              
                $.each(options, function(i) {
                    var option = options[i];
                    if((textbox.val().length > 2) && (option.text.match(regex) !== null)) {
                        $(select).append(
                           $('<option>').text(option.text).val(option.value)
                        );
                    }
                });
                if (selectSingleMatch === true && $(select).children().length === 1) {
                    $(select).children().get(0).selected = true;
                }
            });            
        });
    };

    $(function() {
        $('#select').filterByText($('#textbox'), true);
    });
</script>
<script type="text/javascript">
	function volver(button) {
	  button.form.method = 'get'
	  button.form.action = '/listaConferencia'
	  return true
	}
</script>